<template>
    <div class="header">
        <el-row>
            <el-col >
                <el-col :span="1" :offset="5">
                    <img class="collapse-btn" src="./menu.png" alt="" @click="collapseChage">
                </el-col>

<!--                <el-col :span="6">
                    <i class="el-icon-search"></i>
                    <input class="search" placeholder="请输入内容">
                </el-col>-->

                <el-col :span="12" :offset="6">
                    <div class="nav-wrap">
                        <el-col :span="6">
                          <div class="tab-item">
                            <router-link class="Astyle" to="/account">
                                <div class="top">
                                  <img src="./account.png" alt="">
                                </div>
                                <div class="down">
                                  <span>Account</span>
                                </div>
                            </router-link>
                          </div>
                        </el-col>

                        <el-col :span="6">
                          <div class="tab-item">
                            <router-link class="Astyle" to="/engagement">
                                <div class="top">
                                  <img src="./enga.png" alt="">
                                </div>
                                <div class="down">
                                  <span>engagement</span>
                                </div>
                            </router-link>
                          </div>
                        </el-col>

                        <el-col :span="6">
                          <div class="tab-item">
                            <router-link class="Astyle" to="/company">
                                <div class="top">
                                  <img src="./company.png" alt="">
                                </div>
                                <div class="down">
                                  <span>company</span>
                                </div>
                            </router-link>
                          </div>
                        </el-col>

                        <el-col :span="6">
                            <div class="center">
                                <img src="./i-need.png" alt="">
                                <el-dropdown class="user-name" trigger="click">
                                    <span class="span">向导</span><i class="el-icon-caret-bottom"></i>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item>关于</el-dropdown-item>
                                        <el-dropdown-item>退出登录</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </el-col>
                    </div>
                </el-col>

            </el-col>
        </el-row>
    </div>
</template>

<script>
  import bus from '../bus';
    export default {
      data() {
        return {
          collapse: false,
        }
      },
      methods:{
        // 侧边栏折叠
        collapseChage(){
          this.collapse = !this.collapse;
          bus.$emit('collapse', this.collapse);
        },
      }

    }
</script>

<style scoped>
    .header {
        position: relative;
        box-sizing: border-box;
        height: 70px;
        font-size: 22px;
        color: #fff;
        line-height: 70px;
        background-color: rgba(0, 0, 0, .46);
        box-shadow: 8px 0 12px rgba(0, 0, 0, .8);
    }
    .collapse-btn {
        width: 28px;
    }
    .search {
        background: 0 0;
        border: none;
        outline: 0;
        width: 120px;
        padding: 0;
        margin: 0 0 0 -3px;
        height: 27px;
        color: #fff;
    }
    .Astyle{
        color: #fff;
        text-decoration: none;

    }
    .center {
        text-align: center;

    }
    .top{
        height: 20px;
    }
    .top>img{
        width: 30px;
    }
    .down{
        height: 0px;
    }
    .down>span{
        font-size: 18px;
    }
    .span{
        color: #fff;
        font-size: 30px;
    }
    .tab-item{
      display: inline-block;
      height: 70px;
      width: 100%;
      text-align: center;
    }
    .tab-item>.active{
      display: inline-block;
      height: 100%;
      width: 100%;
      background: #1f9e91;
    }


    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      background: #d3dce6;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
</style>
